<template>
  <div class="business-chart" style="position: relative;width: 98%" >
    <div class="chart-header">
      <div class="chart-title">
        <!--        <span class="title-icon">💎</span>-->
        <!--        <span class="title-text">{{ currentTitle }}</span>-->
        <!--        <span class="more-link">更多</span>-->
      </div>

      <div class="chart-tabs">
        <button
            class="tab-button"
            :class="{ active: activeTab === 'bar' }"
            @click="switchTab('bar')"
        >
          重点业务空间线
        </button>
        <span class="tab-separator">|</span>
        <button
            class="tab-button"
            :class="{ active: activeTab === 'line' }"
            @click="switchTab('line')"
        >
          近七日业务量
        </button>
      </div>
    </div>
    <div  v-if="activeTab == 'line'" style="color: #ccc;  position: absolute;right: 15px;top: 44px;font-size: 12px;z-index:100000;" @click="allData">{{name}}</div>
    <div class="chart-container" ref="chartContainer"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import {onMounted, shallowRef,ref} from "vue";

const {data,data2,data3} = defineProps(['data','data2','data3'])
const name = ref("更多")
const activeTab = ref('bar')
const chart = shallowRef(null)
const lineData = ref({})
const barData = ref({})
const chartContainer =shallowRef(null)

function allData(){
  if(name.value == '更多') {
    lineData.value.dates = data3.date;
    lineData.value.series = data3.data;
    updateChart()
    name.value = '返回'
  }else if(name.value=="返回") {
    lineData.value.dates = data.date;
    lineData.value.series = data.data;
    updateChart()
    name.value = '更多'
  }

}
function initChart() {
  chart.value = echarts.init(chartContainer.value)
  updateChart()
}

function switchTab(tab) {
  activeTab.value = tab
  updateChart()
}

function updateChart() {
  if (!chart.value) return

  const option = activeTab.value === 'line' ? getLineOption() : getBarOption()
  chart.value.setOption(option, true)
}

function getLineOption() {
  return {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '20%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(255, 255, 255, 0.2)',
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      data: lineData.value.series.map(s => s.name),
      top: '5%',
      right: '5%',
      textStyle: {
        color: '#ffffff',
        fontSize: 12
      },
      itemWidth: 12,
      itemHeight: 4,
      itemGap: 20
    },
    xAxis: {
      type: 'category',
      data:lineData.value.dates,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisLabel: {
        color: '#ffffff',
        fontSize: 11
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#ffffff',
        fontSize: 11
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
          type: 'dashed'
        }
      }
    },
    series: lineData.value.series.map(item => ({
      name: item.name,
      type: 'line',
      data: item.data,
      smooth: true,
      lineStyle: {
        color: item.color,
        width: 2
      },
      itemStyle: {
        color: item.color,
        borderWidth: 2,
        borderColor: '#fff'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: item.color + '40' },
            { offset: 1, color: item.color + '10' }
          ]
        }
      },
      symbol: 'circle',
      symbolSize: 6,
      emphasis: {
        scale: true,
        scaleSize: 8
      }
    }))
  }
}

function getBarOption() {
  return {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '20%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(255, 255, 255, 0.2)',
      formatter: function(params) {
        return params[0].name + '<br/>' + '<span style="color: #00d4aa"> '+ params[0].seriesName+'</span>' + '：' + params[0].value + "%"
      },
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      data: barData.value.series.map(s => s.name),
      top: '5%',
      right: '5%',
      textStyle: {
        color: '#ffffff',
        fontSize: 12
      },
      itemWidth: 12,
      itemHeight: 4,
      itemGap: 20
    },

    xAxis: {
      type: 'category',
      data: barData.value.dates,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisLabel: {
        color: '#ffffff',
        fontSize: 11
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      max:100,
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#ffffff',
        fontSize: 11
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
          type: 'dashed'
        }
      }
    },
    series: barData.value.series.map(item => ({
      name: item.name,
      type: 'bar',
      data: item.data,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: item.color },
            { offset: 1, color: item.color + '80' }
          ]
        },
        borderRadius: [2, 2, 0, 0]
      },
      barWidth: '20%',
      emphasis: {
        itemStyle: {
          color: item.color
        }
      }
    }))
  }
}

function handleResize() {
  if (chart.value) {
    chart.value.resize()
  }
}

onMounted(()=> {
  lineData.value.dates = data.date;
  lineData.value.series = data.data;
  barData.value.dates = data2.date;
  barData.value.series = data2.data;
  initChart()
  window.addEventListener('resize', handleResize)


})



</script>

<style scoped>
.business-chart {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-icon {
  font-size: 16px;
}

.title-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.more-link {
  color: #4a90e2;
  font-size: 14px;
  cursor: pointer;
  margin-left: 10px;
}

.more-link:hover {
  color: #357abd;
}

.chart-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.tab-button:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
}

.tab-button.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.tab-separator {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

.chart-container {
  width: 100%;
  height: 300px;
}

@media (max-width: 768px) {
  .chart-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .chart-container {
    height: 250px;
  }

  .chart-tabs {
    flex-wrap: wrap;
  }
}
</style>